<template>
    <el-dialog
    title="群组管理"
    width="550px"
    :visible="show"
    @close="$emit('close')"
    >
        <el-tabs v-model="activeName">
            <el-tab-pane label="创建群聊" name="first">
                <el-form label-width="80px">
                    <el-form-item label="群名">
                        <el-input v-model="group.groupName"></el-input>
                    </el-form-item>
                    <el-form-item label="群公告">
                        <el-input v-model="group.groupNote"></el-input>
                    </el-form-item>
                    <el-form-item label="群成员">
                        <el-select v-model="users" multiple >
                            <el-option 
                            v-for="item in $_.users" 
                            :key="item.userid"
                            :label="item.username"
                            :value="item.userid"
                            >

                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-button @click="createGroup">创建群聊</el-button>
                </el-form>
            </el-tab-pane>
        </el-tabs>
    </el-dialog>
</template>

<script>
import axios from 'axios'
export default {
    name: 'Team',
    props: {
        show: false
    },
    watch: {
        show() {
            this.activeName = 'first'
            this.group = {
                groupName: '',
                groupNote: ''
            },
            this.users= []
        }
    },
    data() {
        return {
            activeName: 'first',
            group: {
                groupName: '',
                groupNote: ''
            },
            users: []
        }
    },
    methods: {
        createGroup() {
            const groupCreateUser = JSON.parse(window.localStorage.getItem('chat-user'))._id;
            const { groupName, groupNote } = this.group;
            axios.post(`${this.$API}/createGroup`, {
                groupName,
                groupNote,
                groupCreateUser
            }).then(res => {
                if (res.data.code == 200) {
                    axios.post(`${this.$API}/addGroupMember`, {
                        groupId: res.data.data._id,
                        groupCreateUser,
                        userids: [...this.users, JSON.parse(window.localStorage.getItem('chat-user')).userid]
                    }).then(res => {
                        if (res.data.code === 200) {
                            this.$message('成功！');
                            this.$emit('close');
                            axios.post(`${this.$API}/allGroup`, {
                                userid: JSON.parse(window.localStorage.getItem('chat-user')).userid
                            }).then(res => {
                                if (res.data.code === 200) {
                                    // this.$_.groups = 
                                    const newGroup = res.data.data.reverse()[0];
                                    this.$_.groups.push({
                                        ...newGroup,
                                        recent: '',
                                        msg: []
                                    })
                                }
                            })
                        }
                    })
                }
            })
        }
    }
}
</script>

<style>

</style>